{% extends "layout/manage.html" %}
{% load static %}


{% block css %}
    <link rel="stylesheet" href="{% static 'plugin/daterangepicker/css/daterangepicker.css' %}">

    <style>

    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid" style="margin-top: 20px">
        <div>
            <div class="input-group" style="width: 300px">
                <span class="input-group-addon">日期范围</span> {# 添加按钮组 #}
                <input id="rangePicker" type="text" class="form-control">
            </div>
        </div>
        <div class="row" style="margin-top: 25px">
            <div class="col-md-8">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-bar-chart" aria-hidden="true"></i> 人员工作进度
                    </div>
                    <div class="panel-body">
                        <div id="projectUser" style="height: 300px">

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-pie-chart" aria-hidden="true"></i> 优先级统计
                    </div>
                    <div class="panel-body">
                        <div id="priority" style="height: 300px">


                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    {#    // 引入顺序 moment要在前边 #}
    <script src="{% static 'plugin/daterangepicker/js/moment.min.js' %}"></script>
    <script src="{% static 'plugin/daterangepicker/js/daterangepicker.js' %}"></script>
    <script src="{% static 'plugin/highcharts/highcharts.js' %}"></script>


    <script>

        var PRIORITY_API = "{% url 'web:manage:statistics_priority' project_id=request.tracer.project.id %}";
        var PRIORITY_PROJECT_USER_API = "{% url 'web:manage:statistics_project_user' project_id=request.tracer.project.id %}";

        $(function () {
            initDateRangePicker();
        });

        /*
            初始化DateRangePicker
        */
        function initDateRangePicker() {
            var options = {
                maxDate: moment(),
                alwaysShowCalendars: true,
                showWeekNumbers: true,
                ranges: {
                    "今天": [moment(), moment()],
                    "昨天": [moment().subtract(1, "days"), moment().subtract(1, "days")],
                    "最近七天": [moment().subtract(6, "days"), moment()],
                    "最近30天": [moment().subtract(29, "days"), moment()],
                    "本月": [moment().startOf('month'), moment().endOf('month')],
                },
                locale: {
                    format: "YYYY-MM-DD",
                    separator: " 至 ",
                    applyLabel: "确定",
                    cancelLabel: "取消",
                    fromLabel: "开始",
                    toLabel: "结束",
                    customRangeLabel: "自定义",
                    weekLabel: "W",
                    daysOfWeek: ["一", "二", "三", "四", "五", "六", "日"],
                    monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                    firstDay: 1
                }
            };
            $("#rangePicker").daterangepicker(options, function (start, end, label) {
                // 选择了时间之后，函数自动触发
                // end 需要加1天，
                {#console.log(start.format("YYYY-MM-DD"), end.add(1, 'days').format("YYYY-MM-DD"));#}
                priority(start.format("YYYY-MM-DD"), end.add(1, 'days').format("YYYY-MM-DD"));
                project_user(start.format("YYYY-MM-DD"), end.add(1, 'days').format("YYYY-MM-DD"));
            });
        }

        /*
            绘制饼状图
        */
        function priority(start, end) {
            // 把开始 和 结束时间传入， 发送ajax请求获取数据
            // HighChart配置文件
            var config = {
                chart: {
                    type: "pie"
                },
                title: {
                    text: null
                },
                credits: {
                    enabled: false,  //关闭版权信息
                },
                tooltip: {
                    pointFormat: '{series.name}:<b>{point.y}</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                        },
                        showInLegend: true
                    }
                },
                series: [{
                    name: '优先级',
                    colorByPoint: true,
                    data: []
                }]
            };
            $.ajax({
                url: PRIORITY_API,
                type: 'GET',
                data: {start: start, end: end},
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        config.series[0].data = res.data;
                        Highcharts.chart("priority", config);
                    }

                }
            });
        }
        /*
            绘制柱状图
        */
        function project_user(start, end) {
            // 把开始 和 结束时间传入， 发送ajax请求获取数据
            // HighChart配置文件
            var config = {
                chart: {
                    type: "column"
                },
                title: {
                    text: null
                },
                credits: {
                    enabled: false,  //关闭版权信息
                },
                xAxis:{
                    categories:[]
                },
                yAxis:{
                    min:0,
                    title:{
                        text: "问题数量"
                    },
                    stackLabels:{  // 堆叠数据标签
                        enabled:true,
                        style:{
                            fontWeight:"bold",
                            color:(Highcharts.theme && Highcharts.theme.textColor) || "gray"
                        }
                    }
                },
                legend:{
                    align: "center",
                    vertical: "top",
                },
                tooltip: {
                    formatter:function () {
                        return '<b>' + this.x + '</b><br/>'+
                                this.series.name + ':' + this.y + '<br/>'+
                                '总量：' + this.point.stackTotal;
                    }
                },
                plotOptions: {
                    column: {
                        stacking:'normal',
                        dataLabels: {
                            enabled: false
                        },
                    }
                },
                series: [{
                    name: '新建',
                    data: []
                }, {
                    name: "处理中",
                    data:[]
                }]
            };
            $.ajax({
                url: PRIORITY_PROJECT_USER_API,
                type: 'GET',
                data: {start: start, end: end},
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        // 需要从后端返回category 和 series
                        config.xAxis.categories = res.categories;
                        config.series = res.data.series;
                        Highcharts.chart("projectUser", config);
                    }

                }
            });
        }

    </script>
{% endblock %}






